<template>
  <div class="h-full flex relative">
    <!-- 左侧文档区域 - 这里是滚动容器 -->
    <div class="flex-1 overflow-y-auto" ref="scrollContainer" id="document-scroll-area">
      <div class="relative" ref="documentContainer">
       <div
    id="page-publicity"
    class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12"
  >
    <n-space vertical :size="24" class="h-full">
      <h2 class="text-xl font-bold text-center">预备党员转正公示结果</h2>

      <div class="leading-relaxed indent-8">
        根据《东北大学发展党员工作细则》关于预备党员转正公示制的有关规定，我支部于 {{ formattedStartDate }} 至 {{ formattedEndDate }} 对预备党员 {{ member.memberName }} 同志的转正问题进行了公示。公示期内，未收到任何单位或个人的异议。该同志已具备中国共产党正式党员条件，现提交支部大会讨论。
      </div>

      <div class="flex-grow"></div>

      <n-space vertical align="end" :size="4">
        <div>中共东北大学软件学院委员会</div>
        <div id="section-signature">{{ formattedSignatureDate }}</div>
      </n-space>
    </n-space>
  </div>
      </div>
    </div>

    <!-- 右侧固定导航区域 - 相对于当前组件定位 -->
    <div class="absolute top-4 right-4 w-64 z-10">
      <div class=" p-4 rounded-lg shadow-md">
        <n-anchor :bound="100" :listen-to="scrollContainer" :offset-target="scrollContainer">
          <n-anchor-link title="落款" href="#section-signature" />
        </n-anchor>
      </div>
    </div>
  </div>
</template>




<script setup>
import { computed } from 'vue'
import { NSpace } from 'naive-ui'

// 接收 member 属性，其中应包含 conversionPublicity 对象
const props = defineProps({
  member: {
    type: Object,
    default: () => ({
      memberName: '×××', // 提供默认值
      conversionPublicity: {
        startDate: null,
        endDate: null,
        signatureDate: null
      }
    })
  },
})

// 辅助函数，用于格式化日期或返回占位符
const formatDate = (dateString) => {
  if (!dateString) return '× 年 × 月 × 日'
  const [year, month, day] = dateString.split('-')
  return `${year} 年 ${month} 月 ${day} 日`
}

// 计算属性，用于格式化各个日期
const formattedStartDate = computed(() => formatDate(props.member?.conversionPublicity?.startDate))
const formattedEndDate = computed(() => formatDate(props.member?.conversionPublicity?.endDate))
const formattedSignatureDate = computed(() => formatDate(props.member?.conversionPublicity?.signatureDate))

</script>

<style scoped>
.indent-8 {
  text-indent: 2em;
}
</style>